Component({
  /**
   * 组件的属性列表
   */
  attached() {
    // 初始化同步顶部距离与 下拉刷新距离
    if (this.headHeight) {
      this.pullDistance = this.headHeight;
    }
  },
  options: {
    multipleSlots: true,
    addGlobalClass: true,
  },

  properties: {
    // 下拉刷新 复位 未达到阈值 提示文本
    pullingText: {
      type: String,
      value: "下拉刷新...",
    },
    //	下拉刷新 达到阈值 提示文本
    loosingText: {
      type: String,
      value: "松手即可刷新...",
    },
    // 下拉刷新 http请求中 提示文本
    loadingText: {
      type: String,
      value: "请求中...",
    },
    // 下拉刷新 http请求成功 提示文本
    successText: {
      type: String,
      value: "刷新成功",
    },
    // 下拉刷新 http请求失败 提示文本
    failText: {
      type: String,
      value: "刷新失败",
    },
    // 顶部内容高度
    headHeight: {
      type: Number,
      value: 45,
    },
    // 触发下拉刷新的距离
    pullDistance: {
      type: Number,
      value: 45,
    },
    // 是否禁用下拉刷新
    disabled: {
      type: Boolean,
      value: false,
    },
    // 下拉刷新  http请求完成 复位间隔时间
    restoreTime: {
      type: Number,
      value: 500,
    },
    //  设置当前下拉刷新状态
    loading: {
      type: Boolean,
      value: false,
    },
    // 是否使用默认下拉刷新插槽
    refresherCustom: {
      type: Boolean,
      value: true,
    },
    // 自定义默认下拉刷新块的样式
    refresherStyle: {
      type: String,
      value: "",
    },
    // 根节点添加class
    customClass: {
      type: String,
      value: "",
    },
    // 根节点style
    customStyle: {
      type: String,
      value: "",
    },
    // 设置竖向滚动条位置
    scrollTop: {
      type: Number,
      value: 0,
    },
    // 值应为某子元素id（id不能以数字开头）。
    scrollIntoView: {
      type: String,
      value: "",
    },
    // 在设置滚动条位置时使用动画过渡
    scrollWithAnimation: {
      type: Boolean,
      value: false,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 滑动方向
    direction: "y",
    // 设置自定义下拉刷新默认样式
    refresher_default_style: "none",
    // 设置自定义下拉刷新区域背景颜色
    refresher_background: "#FFF",
    // 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动
    scroll_anchoring: true,
    // 当前滑动的值
    deltaY: 0,
    // 下拉刷新提示文本 根据不同阈值显示
    refresher_notic: "",
    // 滑动状态码
    // 0 复位
    // 1 未达到阈值
    // 2 达到阈值
    // 3 http请求中
    //-- 4 http请求成功  待定
    //-- 5 http请求失败  待定
    //-- 6 http成功或者失败状态到 复位的延迟时间  待定
    refresh_state: 0,
    //  设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 自定义下拉刷新控件被下拉
    pullingHandle(event) {
      const deltaY = event.detail.dy;
      let refresh_state;
      let refresher_notic;
      if (deltaY < this.data.pullDistance) {
        refresh_state = 1;
        refresher_notic = this.data.pullingText;
      } else {
        refresh_state = 2;
        refresher_notic = this.data.loosingText;
      }
      this.setData({
        refresh_state,
        deltaY,
        refresher_notic,
      });
      this.triggerEvent("pulling", {
        event,
        state: this.data.refresh_state,
      });
    },
    // 自定义下拉刷新被触发
    refreshHandle(event) {
      this.setData({
        refresher_notic: this.data.loadingText,
        refresh_state: 3,
        // loading: true,
      });
      this.triggerEvent("refresh", {
        event,
        state: this.data.refresh_state,
      });
    },
    // 自定义下拉刷新被复位
    restoreHandle(event, trigger = true) {
      this.setData({
        refresh_state: 0,
        deltaY: 0,
        refresher_notic: this.data.pullingText,
        // loading: false,
      });
      if (trigger) {
        this.triggerEvent("restore", {
          event,
          state: this.data.refresh_state,
        });
      }
    },
    // 自定义下拉刷新被中止
    abortHandle(event) {
      this.restoreHandle(null, false);
      this.triggerEvent("abort", {
        event,
        state: this.data.refresh_state,
      });
    },
    //滚动到顶部/左边时触发	 
    toTopHandle(event){
      this.triggerEvent("toTop" , event);
    },
    // 滚动到底部/右边时触发
    toBottomHandle(event) {
      this.triggerEvent("toBottom" , event);
    },
    // 滚动事件
    bindscroll(event) {
      this.scrollTop = event.detail.scrollTop
      this.trigggerEvent("scroll", event);
    },
  },
});
